<template>
  <div>
    <div class="Abox">

        <div class="ZCB">
          <p>手机注册</p>
          <el-form style="padding-left: 15px;">
            
            <div class="left">
              <el-form-item>
              <el-input class="v1" placeholder="请输入您的手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input class="xinxi v1" placeholder="输入验证码"></el-input>
                <el-button>获取验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-input class="v1" placeholder="昵称(列:某猫)"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input class="v1" placeholder="账号密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input class="v1" placeholder="再次确认密码"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="v1">
                  <el-radio v-model="radio" label="1">汉子</el-radio>
                  <el-radio v-model="radio" label="2">妹纸</el-radio>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="v1">
                      <el-select class="v2" v-model="value1" multiple placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                      </el-select>
    
                    <el-select
                    class="v2"
                    v-model="value2"
                    multiple
                    collapse-tags
                      style="margin-left: 20px;"
                        placeholder="请选择">
                      <el-option
                            v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                    </el-select>
                    <el-select class="v2" v-model="value3" multiple placeholder="请选择" style="margin-left: 20px;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                      </el-select>
    
                </div>
              </el-form-item>
              </div>

            <div class="right">
              <el-form-item>
                <el-button class="v3" type="danger">确认注册</el-button>
              </el-form-item>
            </div>
  </el-form>

        </div> 
    </div>
    <div class="Bbox">
      <p class="D1">粤ICP备12041107号 粤公网安备 44030402000128号</p>
      <img class="D2" src="../../../public/footer-logo.png" alt="">
      <div class="D3">
         <a class="dd" href="#">Wap版</a>
         <a class="dd" href="#">服务协议</a>
         <a class="dd" href="#">法律声明</a>
         <a class="dd" href="#">联系我们</a>
         <a class="dd" href="#">授权条款</a>
         <a class="dd" href="#">喵特工</a>
         <a class="dd" href="#">安全联盟</a>
         <a class="dd" href="#">彩蛋</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio:'1'
      }
    },
  }
</script>

<style lang="scss" scoped>
.Abox{
  background: url(../../../public/bg-register.png) no-repeat 178px 90px #fafafa;
  .ZCB{
    width: 960px;
    height: 550px;
    margin: auto;
    background-color: #fff;
    border-radius: 5px;
    font-size: 22px;
    p{
      padding-top: 30px;
      padding-bottom: 30px;
      font-size: 30px;
      text-align: center;
    }
    .left{
      float: left;
      width: 400px;
      .xinxi{
        width: 250px;
      }
      .v2{
        width: 100px;
      }
    }
    .right{
      float: right;
      width: 400px;
      position: relative;
      .v3{
        width: 200px;
        font-size: 30px;
        position: absolute;
        left: 10%;
       
      }
    }
  }
}
.Bbox{
    background-color: #333333;
    height: 400px;
    width: 100%;
    position: relative;
    .D1{
      color: #fff;
    position: absolute;
    bottom: 5px;
    left: 47%;
    }
    .D2{
      position: absolute;
      right: 30%;
      top: 30%;
    }
    .D3{
      color: #fff;
      width: 330px;
      height: 300px;
      position: absolute;
      right: 42%;
      top: 35%;
      .dd{
        width: 100px;
        margin: 5px;
        display: inline-block;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
        &:hover{
          color: #666;
        }
      }
    }
  }
</style>